<template> 
  <EditModal title="修改人员"> 
    <BaseForm /> 
    <template #prepend-footer> 
    </template> 
  </EditModal> 
</template> 
 
<script lang="ts" setup> 
import { useVbenModal } from '@vben/common-ui'; 
import { useVbenForm } from '#/adapter/form'; 
import { updateUser } from '#/api/gis/user'; 
import type { EditUserParams } from '#/api/gis/user'; 

import { message } from 'ant-design-vue'; 
import { ref, nextTick } from 'vue'; 
import { z } from '#/adapter/form'; 

 
const data = ref(); 
 
const [EditModal, EditmodalApi] = useVbenModal({ 
  onOpenChange(isOpen: boolean) { 
    if (isOpen) { 
      data.value  = EditmodalApi.getData<Record<string,  any>>(); 
      // 确保 BaseForm 渲染完成后再设置初始值 
      nextTick(() => { 
        setTimeout(() => { 
          if (data.value)  { 
            const plainData = JSON.parse(JSON.stringify(data.value));  
            // 1.处理备注 
            if (plainData.data.remark  === "---") { 
              plainData.data.remark  = ""; 
            } 
            console.log('  编辑接受到的数据:', plainData); 
 
            // 处理 avatar 字段，将字符串转换为数组 
            if (plainData.data.avatar)  { 
              plainData.data.avatar  = [{ url: plainData.data.avatar  }]; 
            } 
 
            // 设置 BaseForm 的初始值 
            BaseFormApi.setValues(plainData.data,  false); 
            BaseFormApi.getValues().then((values)  => { 
              console.log('  获取到的值:', values); 
            }); 
          } 
        }, 10); // 延迟 10ms 
      }); 
    } 
  } 
}); 
 
const [BaseForm, BaseFormApi] = useVbenForm({ 
  commonConfig: { 
    componentProps: { 
      class: 'w-full', 
    }, 
  }, 
  handleSubmit: onSubmit, 
  layout: 'horizontal', 
  schema: [ 
    { 
      component: 'Input', 
      componentProps: { 
        placeholder: '请输入用户名', 
        disabled: true, 
      }, 
      fieldName: 'userName', 
      label: '用户名：', 
      rules: z.string()  
        .min(5, { message: '用户名至少需要5个字符' }) 
        .max(10, { message: '用户名最多可以有10个字符' }), 
    }, 
    { 
      component: 'Input', 
      componentProps: { 
        placeholder: '请输入姓名', 
      }, 
      fieldName: 'realName', 
      label: '姓名：', 
      rules: "required" 
    }, 
    { 
      component: 'Input', 
      componentProps: { 
        placeholder: '请输入邮箱', 
      }, 
      fieldName: 'email', 
      label: '邮箱：', 
      rules: z.string().email({  message: '请输入有效的邮箱地址' }), 
    }, 
    { 
      component: 'Input', 
      componentProps: { 
        placeholder: '请输入电话号码', 
      }, 
      fieldName: 'phoneNumber', 
      label: '电话：', 
      rules: z.string().regex(/^1[3-9]\d{9}$/,  { message: '请输入有效的电话号码' }), 
    }, 
    // { 
    //   component: 'Upload', 
    //   componentProps: { 
    //     listType: 'picture', 
    //     beforeUpload: async (file: File) => { 
    //       console.log(' 上传文件:', file); 
    //       try { 
    //         const response = await uploadAvatar(file); 
    //         console.log(' 文件成功上传1:', response); 
    //         if (response && response.url)  { 
    //           return response.url;  
    //         } else { 
    //           console.error(' 无效回应 from uploadAvatar:', response); 
    //           message.error(' 文件上传失败，请重试'); 
    //           return false; 
    //         } 
    //       } catch (error) { 
    //         console.error(' 文件上传失败:', error); 
    //         message.error(' 文件上传失败，请重试'); 
    //         return false; 
    //       } 
    //     }, 
    //     onChange(info: UploadChangeParam<UploadFile>) { 
    //       const { file, fileList } = info; 
    //       if (file.status  === 'done') { 
    //         const url = file.response?.url  || file.name;  
    //         console.log(' 文件上传成功2:', url); 
    //         message.success(' 文件上传成功2'); 
    //         // 确保 fileList 是一个数组 
    //         BaseFormApi.setValues({  avatar: fileList.map(f  => ({ url: f.response?.url  || f.name  })) }, false); 
    //       } else if (file.status  === 'error') { 
    //         console.error(' 文件上传失败'); 
    //         message.error(' 文件上传失败，请重试'); 
    //       } 
    //     }, 
    //   }, 
    //   fieldName: 'avatar', 
    //   label: '头像', 
    //   renderComponentContent: () => { 
    //     return { 
    //       default: () => '点击上传图片', 
    //     }; 
    //   }, 
    // }, 
    { 
      component: 'RadioGroup', 
      componentProps: { 
        options: [ 
          { 
            label: '男', 
            value: 0, 
          }, 
          { 
            label: '女', 
            value: 1, 
          }, 
        ], 
      }, 
      fieldName: 'sex', 
      label: '性别：', 
      rules: "selectRequired" 
    }, 
    { 
      component: 'RadioGroup', 
      componentProps: { 
        options: [ 
          { 
            label: '冻结', 
            value: 1, 
          }, 
          { 
            label: '正常', 
            value: 0, 
          }, 
        ], 
      }, 
      fieldName: 'status', 
      label: '用户状态：', 
      rules: "selectRequired" 
    }, 
    { 
      component: 'Input', 
      componentProps: { 
        placeholder: '请输入备注', 
      }, 
      fieldName: 'remark', 
      label: '备注', 
    }, 
  ], 
}); 
 
// 定义一个自定义事件，用于在修改完数据后刷新页面 
const emit = defineEmits(['refreshTable']); 
function onSubmit(values: Record<string, any>) { 
  // 在提交时，将 avatar 字段从数组转换回字符串 
  if (values.avatar  && values.avatar.length  > 0) { 
    values.avatar  = values.avatar[0].url;  
  } 
  const params = values as EditUserParams; 
  updateUser(params).then(() => { 
    EditmodalApi.close();  
    message.success('  修改人员成功'); 
  }).catch((error) => { 
    console.error('  修改人员失败:', error); 
    message.error('  修改人员失败'); 
  }); 
  emit('refreshTable'); // 触发自定义事件 
} 
</script> 
